<template>
  <!-- 填表说明 -->
  <u-popup :show="popupShow" mode="bottom" border-radius="14" :closeable="false">
    <view class="mt-8 px-4 text-sm text-gray-600 space-y-2">
      <view class="relative">
        <u-image class="modal-img" src="/static/images/report-success.png" height="120" width="340" mode="aspectFill" />
      </view>
      <view class="mb-2 text-center">
        <view>您是</view>
        <view class="flex items-center justify-center">
          班级第<text class="px-2 text-3xl text-#E7B710 font-bold">
            88
          </text> 位
        </view>
        <view>报到的新生</view>
      </view>

      <view class="pb-8 pt-2 text-center text-#265A63 underline" @click="navigateTo">
        点击查看报到详情
      </view>
    </view>
  </u-popup>
</template>

<script setup>
import { defineExpose, reactive, ref } from 'vue';

const popupShow = ref(false);
const init = () => {
  popupShow.value = true;
};
defineExpose({
  init,
});
const navigateTo = () => {
  uni.redirectTo({
    url: '/pages/biz/report/detail',
  });
};
</script>

<style scoped lang="scss">
:deep(.u-popup__content){
  border-radius: 15px 15px 0px 0px;
}
.modal-img{
    position: absolute; top: -80px; left: 0; right: 0; bottom: 0; margin: auto;
    z-index: 999;
  }
  :deep(.u-popup__content){
    background: url('@/static/images/report-bg.png') no-repeat ;
    background-size: 100% 100%;
  }
</style>
